<template>
  <div>
    <div class="table-responsive">
      <table class="table table-hover">
        <caption></caption>
        <thead>
          <tr>
            <th></th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in carList" :key="item.id">
            <td>
              <img style="width: 60px" :src="item.imgUrl" alt="" />
            </td>
            <td>
              <router-link :to="'/detail/' + item.id">
                {{ item.title }}
              </router-link>
            </td>
            <td>￥ {{ item.price }}</td>
            <td>&nbsp;{{ item.quantity }}&nbsp;</td>
            <td>￥{{ calCurrentTotal(item) }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-if="paymentCompleted">
      <div class="alert alert-success" role="alert">
        付款成功，清空购物车
      </div>
    </div>

    <div class="d-flex justify-content-between align-items-center">
      <strong>总价 {{ calAllTotal }}</strong>
      <button @click="payment" class="btn btn-danger">假装付款</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState(["carList"]),
    ...mapGetters(["calAllTotal"]),
  },
  data() {
    return { paymentCompleted: false };
  },
  methods: {
    calCurrentTotal(item) {
      return parseFloat(item.price * item.quantity).toFixed(2);
    },
    payment() {
      this.deleteCarList();
      this.paymentCompleted = true;
    },
    ...mapMutations(["deleteCarList"]),
  },
};
</script>
<style>
td {
  vertical-align: middle !important;
}
</style>
